<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我的</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-btn {
				padding: 10px;
			}
			.btns {
				display: flex;
				width: 100%;
				justify-content: space-around;

			}
			.btns div {
				width: 30%;
				padding: 4px;
				background-color: #0380fe;
				border-radius: 4px;
				text-align: center;
				color: #fff;
				cursor: pointer;
			}
			.bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				padding-top: 4px;
				background-color: aliceblue;
				display: flex;
				justify-content: space-around;
			}
			.bottom .bottom-item {
				text-align: center;
				font-size: 14px;

			}
			.active {
				color: rgb(72, 122, 250);
			}
			.bottom img {
				width: 20px;
				height: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 class="mui-title">用户信息</h1>
		</header>
		<div class="mui-content">
			<div id="output"></div>
			<div class="btns">
				<div id="btn1">去登录</div>
				<div id="btn2">去注册</div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">首页</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">保险</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">礼遇</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">我的</div>
			</div>
		</div>

		<script>
			const queryString = window.location.search;
			console.log("queryString", queryString);
			let initIndex = 3;
			const btns = document.querySelectorAll('.bottom-item');
			btns.forEach((btn, index) => {
				if(index == initIndex)
				btn.className += ' active'
			});

			function parseQueryString(queryString) {
				const params = new URLSearchParams(queryString);
				const result = {};
				for (const [key, value] of params.entries()) {
					result[key] = value;
				}
				return result;
			}
			const params = parseQueryString(queryString);
			const outputContainer = document.getElementById('output');
			if (!queryString) {
				const p1 = document.createElement('p');
				const p2 = document.createElement('p');
				p1.textContent = `学号: 2023338333`;
				p2.textContent = `姓名: 王梓丞`;
				outputContainer.appendChild(p1);
				outputContainer.appendChild(p2);
			}
			for (const [key, value] of Object.entries(params)) {
				const pElement = document.createElement('p');
				// pElement.textContent = `${key}: ${value}`;
				if (key == 'account') {
					pElement.textContent = `账号: ${value}`;
				}
				if (key == 'password') {
					pElement.textContent = `密码: ${value}`;
				}
				if (key == 'username') {
					pElement.textContent = `用户名: ${value}`;
				}
				if (key == 'address') {
					pElement.textContent = `地址: ${value}`;
				}
				if (key == 'phone') {
					pElement.textContent = `手机号: ${value}`;
				}
				outputContainer.appendChild(pElement);
			}

			const btn1 = document.getElementById("btn1")
			const btn2 = document.getElementById("btn2")
			btn1.addEventListener('click', () => {
				window.location.href = `login.html`
			})
			btn2.addEventListener('click', () => {
				window.location.href = `reg.html`
			})

			// 底部事件
			function fnBottom() {
				const btns = document.querySelectorAll('.bottom-item'); 
				btns.forEach((btn, index) => {
					btn.addEventListener('click', (event) => {
						btns.forEach(item => item.classList.remove('active'));
						event.currentTarget.classList.add('active');
						// console.log(index); 
						if(index== 0){
							window.location.href = `home.html`
						}else if(index ==1){
							window.location.href = `insurance.html`
						}else if(index ==2){
							window.location.href = `gift.html`
						}else if(index ==3){
							window.location.href = `mine.html`
						}
					});
				});
			}
			fnBottom()
		</script>
	</body>

</html>